<template>
    <el-card>
        <el-form :model="queryParams" ref="queryParams" :inline="true" label-width="100px">
            <el-form-item label="申请时间：">
                 <el-date-picker type="datetime" placeholder="开始日期" size="small"></el-date-picker>
            </el-form-item>
            <el-form-item>
                 -
                 <el-date-picker type="datetime" placeholder="结束日期" size="small"></el-date-picker>
            </el-form-item>
            <el-form-item label="标题：" prop="name">
                <el-input v-model="queryParams.name" placeholder="标题" size="small"></el-input>
            </el-form-item>
             <el-form-item label="申请状态：" prop="path">
                <el-input v-model="queryParams.path" placeholder="申请状态" size="small"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-delete" size="small" @click="resetQuery('queryParams')">清空</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10">
            <el-col :span="24">
                <div style="margin-bottom: 10px">
                    <el-button type="primary" plain size="small" @click="handleApply">发布|下线申请</el-button>
                </div>
            </el-col>
        </el-row>
          <el-table :data="tableData" size="mini" border style="width: 100%">
             <el-table-column type="index" label="#" width="55"></el-table-column>
             <el-table-column prop="createTime" label="申请时间"></el-table-column>
             <el-table-column prop="title" label="标题" width="300"></el-table-column>
             <el-table-column prop="type" label="操作类型">
                <template slot-scope="{row}">
                    <span v-if="row.type===0">发布</span>
                    <span v-if="row.type===1">下线</span>
                </template>
             </el-table-column>
             <el-table-column prop="status" label="申请状态">
                <template slot-scope="{row}">
                    <span v-if="row.status===0">待审核</span>
                    <span v-if="row.status===2" style="color: green">审核通过</span>
                    <span v-if="row.status===3">撤回</span>
                </template>
             </el-table-column>
             <el-table-column prop="approvalBy" label="审核人"></el-table-column>
             <el-table-column prop="approvalTime" label="审核时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="handleView(scope.row)">查看</el-button>
                    <el-button type="text" size="mini" @click="handleSetting(scope.row)">撤回</el-button>
                </template>
            </el-table-column>
         </el-table>
       <el-pagination
                v-show="total>0"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                :current-page="1"
                :page-sizes="[10, 20, 30, 40,50,100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                class="pagination-container"
                :total="total">
        </el-pagination>
        <el-dialog
            title="发布|下线申请"
            :visible.sync="appVisible"
            width="60%"
            >
            <el-row>
              <el-col :span="3">
                  <h3>操作以下接口:</h3>
              </el-col>
              <el-col :span="4">
                  <el-button type="primary" plain size="small" @click="handleAdd">添加</el-button>
              </el-col>
            </el-row>
            <el-table :data="tableData2" size="mini" border style="width: 100%">
                <el-table-column type="index" label="#" width="55"></el-table-column>
                <el-table-column label="所属服务" prop="serviceName"></el-table-column>
                <el-table-column label="接口名" prop="name"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="remove(scope.$index)">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-form label-width="110px" :model="appForm" ref="appForm" :rules="rules">
                <el-row :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="标题：" required prop="title">
                            <el-input size="small" v-model="appForm.title" placeholder="发布|下线标题"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="类型：" required prop="type">
                            <el-radio-group v-model="appForm.type">
                                <el-radio :label="0">发布</el-radio>
                                <el-radio :label="1">下线</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="申请原因：" prop="reason">
                            <el-input type="textarea" rows="3" size="small" placeholder="申请原因" v-model="appForm.reason"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="选择审核人：" required prop="approvalUser">
                            <el-select placeholder="状态" size="small" v-model="appForm.approvalUser">
                                <el-option v-for="item in approvalUserList" :label="item.userName" :key="item.userId" :value="item.userId"></el-option>
                             </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="appVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="handleSave('appForm')" size="mini">确 定</el-button>
            </span>
        </el-dialog>
        <el-drawer title="添加接口" :visible.sync="drawerVisible" border direction="rtl" size="50%">
             <el-form :model="appQueryParams" ref="appQueryParams" :inline="true" label-width="100px">
                <el-form-item label="所属服务：" prop="serviceName">
                    <el-input v-model="appQueryParams.serviceName" placeholder="标题" size="small"></el-input>
                </el-form-item>
                <el-form-item label="接口名：" prop="name">
                    <el-input v-model="appQueryParams.name" placeholder="申请状态" size="small"></el-input>
                </el-form-item>
                 <el-form-item label="路径：" prop="path">
                    <el-input v-model="appQueryParams.path" placeholder="申请状态" size="small"></el-input>
                </el-form-item>
                 <el-form-item label="状态：" prop="currentState">
                     <el-select v-model="appQueryParams.currentState" placeholder="状态" size="small">
                        <el-option v-for="item in statusArr" :label="item.label" :key="item.value" :value="item.value"></el-option>
                     </el-select>
                </el-form-item>
                <el-row>
                  <el-col :span="24" style="text-align: right">
                     <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="small" @click="handleAppQuery">搜索</el-button>
                        <el-button icon="el-icon-delete" size="small" @click="resetAppQuery('appQueryParams')">清空</el-button>
                     </el-form-item>
                  </el-col>
                </el-row>
             </el-form>
            <el-table :data="addTableData" ref="addTableRef" size="mini" border style="width: 95%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="serviceName" label="所属服务"></el-table-column>
                <el-table-column prop="name" label="接口名"></el-table-column>
                <el-table-column prop="method" label="方法"></el-table-column>
                <el-table-column prop="path" label="路径"></el-table-column>
                <el-table-column prop="developer" label="开发人员"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="{row}">
                        <el-tag type="primary">{{row.status|statusType}}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-show="addTotal>0"
                @size-change="addSizeChange"
                @current-change="addCurrentChange"
                background
                :current-page="1"
                :page-sizes="[10, 20, 30, 40,50,100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                class="pagination-container"
                :total="addTotal">
             </el-pagination>
            <div style="text-align: right;margin-top: 10px;">
                <el-button type="primary" @click="submit" size="small">确定</el-button>
                <el-button @click="drawer = false" size="small">取消</el-button>
            </div>
        </el-drawer>
    </el-card>
</template>

<script>
import { getApplyList,getSubApplyList,getApprovalUser,save } from '@/api/aggregate/apply.api.js'
    export default {
        data() {
            return {
                queryParams: {
                    current: 1,
                    size: 10
                },
                tableData: [],
                total: 0,
                statusArr:[
                    {label: '未发布',value: 0},
                    {label: '已发布',value: 1},
                    {label: '已下线',value: 2},
                    {label: '待审核',value: 3},
                    {label: '待发布',value: 4},
                    {label: '待下线',value: 5},
                    {label: '审核不通过',value: 6},
                ],
                appQueryParams: {
                    current: 1,
                    size: 10,
                    serviceName: undefined,
                    name: undefined,
                    path: undefined,
                    currentState: undefined
                },
                tableData2: [],
                addTableData: [],
                addTotal: 0,
                appVisible: false,
                formLabelWidth: '120px',
                appForm: {},
                drawerVisible: false,
                // 审核人
                approvalUserList: [],
                rules: {
                   title: [{ required: true, message: '请输入标题', trigger: 'blur' },],
                   type: [{ required: true, message: '请选择类型', trigger: 'blur' },],  
                   approvalUser: [{ required: true, message: '请选择审核人', trigger: 'blur' },]  
                }
            }
        },
        filters: {
            statusType(value) {
                if(value===1) {
                    return '未发布'
                }else if(value===2) {
                    return '已发布'
                }else if(value===3) {
                    return '已下线'
                }else if(value===4) {
                    return '待审核'
                }else if(value===5) {
                    return '待发布'
                }else if(value===6) {
                    return '待下线'
                }else if(value===7) {
                    return '审核不通过'
                }
            }
        },
        mounted() {
           this.getList();
        },
        methods: {
            getSubList() {
                getSubApplyList(this.appQueryParams).then(res=>{
                    if(res.code === 200) {
                        this.addTableData = res.data.records;
                        this.addTotal = res.data.total;
                    }
                })
            },
            getList() {
                getApplyList(this.queryParams).then(res=>{
                    if(res.code === 200) {
                        this.tableData = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            remove(index) {
                this.tableData2.splice(index,1);
            },
            // 搜索
            handleQuery() {
                this.queryParams.current = 1;
                this.getList();
            },
            // 清空
            resetQuery(formName) {
                this.$refs[formName].resetFields();
                this.getList();
            },
            handleSizeChange(val) {
                this.queryParams.size = val;
                this.getList();
           },
            handleCurrentChange(val) {
                this.queryParams.current = val;
                this.getList();
            },
             // 搜索
            handleAppQuery() {
                this.appQueryParams.current = 1;
                this.getSubList();
            },
             // 清空
            resetAppQuery(formName) {
                this.$refs[formName].resetFields();
                this.getSubList();
            },
            addSizeChange(val) {
                this.appQueryParams.size = val;
                this.getSubList();
           },
            addCurrentChange(val) {
                this.appQueryParams.current = val;
                this.getSubList();
            },
            handleApply() {
                this.appVisible = true;
            },
            handleAdd() {
                this.tableData2 = [];
                this.drawerVisible = true;
                this.getSubList();
            },
            async submit() {
                this.tableData2 = this.$refs.addTableRef.selection;
                this.drawerVisible = false;
                const configIds = this.tableData2.map(item=>item.id)
                const result = await getApprovalUser({configIds});
                if(result.code === 200) {
                    this.approvalUserList = result.data.approvalUsers;
                }
            },
            handleSave(formName) {
                this.$refs[formName].validate(async(valid) => {
                    if (valid) {
                        if(this.tableData2.length===0) {
                            this.$message.error('请至少选择一个接口');
                            return;
                        }
                        this.appForm.configIds=this.tableData2.map(item=>item.id);
                        const result = await save(this.appForm);
                        if(result.code === 200) {
                            this.$message.success('保存成功');
                            this.getList();
                            this.appVisible = false;
                        }
                    } else {
                        return false;
                    }
                });
            },
            // 查看
            handleView(row) {
                this.$router.push({
                    path: '/aggregateRecord/applyDetail',
                    query: {
                        originId: row.id
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
.pagination-container {
    padding: 10px;
    text-align: right;
}
</style>